<script setup> 
defineProps({
    title:{
        required:true,
    }
})
</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>
                    {{title}}
                </span>

                <div class="extra">
                    <slot name="extra"></slot>
                </div>
            </div>
        </template>
        <slot></slot>

    </el-card>
</template>

<style scoped>
    .page-container{
        min-height: 100%;
        box-sizing: border-box;
    }
    .header{
        display: flex;
        justify-content: space-between;
        align-content: center;
    }
</style>